<extend name="../../../Public/master"/>
<block name="content">
<!--中间开始-->
<div id="content">
    <div class="cont">
        <div class="main">
            <div class="content-left">
                <div class="box">
                    <div class="zhezhao"></div>
                    <div class="sekuai"></div>
                    <div class="smallTu"></div>
                    <a href="javascript:;" class="shang">&lt;</a>
                    <div class="list1">

                        <ul>
                            <foreach name="goods['small']" key="k" item="v">
                                <li><img src="__ROOT__/{$v}" alt=""></li>

                            </foreach>


                        </ul>

                    </div>
                    <a href="javascript:;" class="xia">&gt;</a>

                    <div class="bgTu"></div>
                    <div class="bgTuHide">
                        <ul>
                            <foreach name="goods['big']" key="k" item="v">
                            <li><img src="__ROOT__/{$v}" alt=""></li>
                            </foreach>
                        </ul>

                    </div>
                </div>
            </div>
            <div class="content-right">

                <div class="tit">{$goods['gname']}</div>
                <div class="description">{$goods['intro']}</div>
                <div class="pirve">￥ {$goods['price']}</div>
                <!--分类数据【对应的是控制器里的1.2.3步】-->
                <foreach name="data" key="k" item="v">
                <div class="category">
                    <h4>{$k}</h4>
                    <ul>
                        <foreach name="v" key="kk" item="vv">
                            <!--gtid={$vv['gtid']}没有默认选中-->
                        <li gtid="{$vv['gtid']}">{$vv['gtvalue']}</li>
                        <!--<li>港行</li>-->
                        <!--<li>水货</li>-->
                        <!--<li>正品行货</li>-->
                        <!--<li>回收翻新</li>-->
                        </foreach>
                    </ul>
                </div>
                    </foreach>
                <style>
                    .cont .content-right .nobdr h6.red{
                        background: #fa5437;
                    }
                    .cont .content-right .nobdr h6.huise{
                        background: #333;
                    }
                </style>
                <!--ajax判断有货没货这种情况-->
                <script>
                  $(function(){
                     // 在这块测试一下看有没有走进来
                      //alert(1);
                      //1.给每个标签都添加单击事件
                      $( '.category ul li').click(function(){
                            //alert(1);
                      //2.判断当所有标签都被点中的话 那么就执行异步[发送异步请求]
                          if($('.zhong').length == <?php echo count($data)?>){
                             // alert(1);
                              //3.找到与商品ID对应的库存组合ID的值
                              var gid =<?php echo $_GET['gid']?>;
                              var combine = '';
                              //4.找到当前选定属性的值 【也就是组合属性ID】
                              $.each($('.zhong'),function(){
                                  combine +=$(this).attr('gtid') + ',';
                              })
                              $.post("{:u('ajaxGetTotal')}",{gid:gid,combine:combine},function(res){
                                  //抓取页面数据
//                                  看看有没有抓到

                              $('#wb_inventory').html('库存为：<span class="totle">' +res.total + '</span>');
                              $('#glid').html(+res.glid);
                              $('#number').html(+res.number);

                             if(res.valid){
                                 //有库存的话[在上面自定义的颜色] remove删除移除
                                 $('.cont .content-right .nobdr h6').removeClass('huise').addClass('red');

                             }else{
                                 //没有货存
                                 $('.cont .content-right .nobdr h6').addClass('huise').removeClass('red');
                                 //判断当库存为空时，鼠标点击不刷新页面 按钮颜色为灰色
//                                  $(this).attr('disabled','disabled');
//                                  $(this).mousemove(function(){
//                                      $('#button').style.background='#000'
//                                 })
                             }
                              },'json');
                          }

                      })
                  })
                </script>

                <div class="num">
                    <h5>数量</h5>
                    <a href="javascript:;" class="num_l">-</a>
                    <input type="text" value="1" />
                    <a href="javascript:;" class="num_r">+</a>
                    <span><li id="wb_inventory"></li></span>

                </div>

                <div class="nobdr">
                    <h6 class="huise"><a href="javascript:;" >立即购买</a></h6>
                </div>
                <script>
                    $(function(){
                        $('.cont .content-right .nobdr h6.huise').click(function(){
                            //判断当两个又一个没有选中时 弹出
                            if($('.zhong').length !=<?php echo count($data)?>){
                                layer.msg('请选择商品规则。。',{icon: 5}, function(){
                                });
                                return false;
                            }
                            if($(this).is('.huise')){
                                //判断当库存为空时点击按钮 弹出
                                layer.msg('库存为空', function(){
                               //关闭后的操作
                                });
                                return false;
                            }


                            //数值最大值的判断
                            //走到这里 执行 添加购物车动作

                            var gid = <?php echo $_GET['gid']?>;
                            //抓取库存元素
                            var count =parseInt($('.totle').html()) ;
                            //alert(count);
                            var num = $('.num').find('input').val();

                            //alert(1);
                            var options ={};
                            //选中当前点中的尺码和颜色
                               $.each($('.zhong'),function(){
                               options[$(this).parents('.category').find('h4').html()] =$(this).html();
                               // alert($(this).html());

                            })
                         //选中后执行添加到购物车
                           // alert(1);

                            $.post("{:u('ajaxAddCart')}",{gid:gid,count:count,num:num,options:options},function(res){
                                //return;
                                location.href = "{:u('home/cart/index')}";
                            })
                        })
                    })
                </script>
                <div class="houdun">
                    <h3>保障</h3>
                    <p><i class="o1"></i>维依尚品商城发货&售后</p>
                    <p><i class="o2"></i>满99元包邮</p>
                    <p><i class="o3"></i>7天无理由退货</p>
                    <p><i class="o4"></i>15天免费换货</p>
                </div>
            </div>
        </div>
    </div>
    <div class="desc" id="xijie">
        <div class="desctab" >
            <div class="main">
                <ul>
                    <li><a href="#xijie">产品详情</a><span>|</span></li>
                    <li><a href="#guige">规格参数</a><span>|</span></li>
                    <li><a href="#wenti">常见问题</a></li>
                </ul>
            </div>
        </div>

        <div class="con" >
            <img src="" />
            <img src="" />
            <img src="" />
            <img src="" />
            <img src="" />
        </div>
        <div class="con main" id="wenti">
            <h2>常见问题</h2>
            <dl>
                <dt><i>1、</i><em></em>订单提交成功后还可以修改收货信息吗？</dt>
                <dd><u></u>订单付款之前，您可以进入“我的订单”，在订单详情页内修改收货信息。付款之后将不可修改收货信息。</dd>
            </dl>
        </div>
    </div>
</div>
</div>
</block>